{% extends "dashboard/base.html" %}
{% load i18n %}
{% load prices_i18n %}
{% load materializecss %}
{% load staticfiles %}
{% load product_first_image from product_images %}

{% block title %}
  {% trans "Search results" context "Search page title" %} - {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
  <ul class="breadcrumbs">
    <li class="visible-s">{% trans "Search" context "Dashboard search" %}</li>
  </ul>
{% endblock %}

{% block menu_catalogue_class %} active{% endblock %}

{% block content %}
  <div class="row">
    <div class="col s12">
      <div class="card search-form">
        <form class="hide-on-med-and-up" method="get" action="{% url "dashboard:search" %}">
          <input id="icon_prefix" type="text" class="validate left" placeholder="{% trans "Search" context "Dashboard search" %}" name="q" value="{% if query %}{{ query }}{% endif %}">
          <button class="btn-flat" type="submit">
            <svg data-src="{% static "dashboard/images/search.svg" %}" width="20" height="20" fill="#E57373" />
          </button>
        </form>
        <form class="hide-on-med-and-up row" method="get" action="{% url "dashboard:search" %}">
          <input type="hidden" class="validate" name="q" value="{% if query %}{{ query }}{% endif %}">
        </form>
      </div>
      {% if results %}
        <ul class="collection list">
          {% for result in results %}
            <li class="collection-item avatar list-item">
              {% if result.content_type == 'product_product' %}
                {% with product=result %}
                  <a href="{% url 'dashboard:product-update' pk=product.pk %}">
                    <img src="{% product_first_image product size="60x60" method="crop" %}"
                         srcset="{% product_first_image product size="60x60" method="crop" %} 1x, {% product_first_image product size="120x120" method="crop" %} 2x"
                         class="circle teal" alt="{{ product.name }}">
                    <span class="list-item-name">
                      {{ product.name }}
                    </span>
                    <p class="list-item-price">
                      <small>
                        {% gross product.price html=True %}
                      </small>
                    </p>
                  </a>
                {% endwith %}
              {% elif result.content_type == 'order_order' %}
                <a href="{% url 'dashboard:order-details' order_pk=result.pk %}">
                  <i class="small material-icons circle teal">payment</i>
                  <span class="list-item-name">
                    {% blocktrans trimmed with order_number=result.pk context "Dashboard order" %}
                      Order #{{ order_number }}
                    {% endblocktrans %}
                  </span>
                  <p class="list-item-price">
                    <small>
                      {% blocktrans trimmed context "Dashboard customer" with email=result.user_email %}
                        Customer: {{ email }}
                      {% endblocktrans %}
                    </small>
                    <small>
                      {% blocktrans trimmed with placed=result.created context "Dashboard order info" %}
                        Placed on: {{ placed }}
                      {% endblocktrans %}
                    </small>
                  </p>
                </a>
              {% elif result.content_type == 'userprofile_user' %}
                <a href="{% url 'dashboard:customer-details' pk=result.pk %}">
                  <i class="small material-icons circle teal">perm_identity</i>
                  <span class="list-item-name">
                    {% blocktrans trimmed with full_name=result.get_full_name context "Dashboard user" %}
                      User {{ full_name }}
                    {% endblocktrans %}
                  </span>
                  <p class="list-item-price">
                    <small>
                      {% trans "Customer" context "Dashboard customer" %}
                    </small>
                  </p>
                </a>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
        {% include "dashboard/includes/_pagination.html" with page_obj=results %}
      {% elif query %}
        <div class="not-found">
            <p class="grey-text">
              {% blocktrans trimmed with full_name=result.get_full_name context "No Search result message" %}
                No results for query "{{ query }}".
              {%  endblocktrans %}
            </p>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}
